<template>
  <section id="feedback-index">
    <el-table
      :data="list"
      v-loading="loading"
      :header-cell-style="{fontWeight: 'bold'}"
      stripe
      highlight-current-row
    >
      <el-table-column label="用户昵称" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.user ? scope.row.user.nickName : '未知' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.user ? scope.row.user.phone : '未知' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="反馈内容"
        prop="remark"
        show-overflow-tooltip></el-table-column>
      <el-table-column
        label="创建时间"
        prop="create_time"
        show-overflow-tooltip></el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        :page-size.sync="form.size"
        :current-page.sync="form.page"
        :total="total"
        :hide-on-single-page="true"
        @current-change="search"
      >
      </el-pagination>
    </div>
  </section>
</template>

<script>
  /**
   * @Author: lifuzhao
   * @Date: 2019-07-18
   * @Project: driver
   */
  import {pageSize} from "../../constant";

  export default {
    name: "index",
    data() {
      return {
        loading: false,
        list: [],
        total: 0
        , form: {
          page: 1
          , size: pageSize
        }
      }
    }
    , watch: {
      $route: {
        deep: true
        , immediate: true
        , handler() {
          this.search(1)
        }
      }
    }
    , methods: {
      search(page) {
        this.form.page = page
        this.getList()
      }
      , getList() {
        if (this.loading) {
          this.$message({
            message: '正在处理中···',
            type: 'error'
          })
          return
        }
        this.loading = true
        this.$axios
          .get('/api/v1/messages', {
            params: {
              page: this.current_page,
              size: this.size
            }
          })
          .then(res => {
            let {total = 0, data = []} = res
            this.list = data
            this.total = total
          })
          .catch(() => {
          })
          .finally(() => {
            this.loading = false
          })
      }
    }
  }
</script>